<script lang="ts" setup>
// #region 引入
import { ref, reactive, watch } from "vue"
import {
  FormInstance,
  FormRules,
  ElMessage,
  ElMessageBox,
  type UploadUserFile,
  type UploadProps,
  type TabsPaneContext,
  type UploadInstance
} from "element-plus"
// import { getOrderDataApi } from "@/api/order"
import { formatDateTime } from "@/utils"
import {
  AddComplaintApi,
  getComplaintApi,
  updateComplaintApi,
  ComplaintUpload,
  addMessageApi,
  queryMessageApi,
  SHbuttonApi,
  deleteComplaintApi,
  rechargeRecord
} from "@/api/complaint"
import { usePagination } from "@/hooks/usePagination"
import { useUserStore } from "@/store/modules/user"
import { useTeamStore } from "@/store/modules/team"
import { Search, Refresh, Download } from "@element-plus/icons-vue"
import { getComboDataApi10 } from "@/api/combo"
import { shortcuts } from "@/utils/dateSet"

defineOptions({
  name: "Publish"
})
//  #endregion

const activeName = ref("one")
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const userStore = useUserStore()
// 打开提示框
// 点击弹窗点击弹窗
const dialogVisible = ref<boolean>(false)
const dialogVisible1 = ref<boolean>(false)

const tableData = ref()
const tableData1 = ref()
const tableData2 = ref()

// #region 搜索功能
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  id: "", // 纠纷单号
  team: "",
  packageId: "", //套餐id
  contact: "", // 联系人
  mobile: "", // 联系电话

  type: "", // 纠纷单类型
  reason: "", // 纠纷原因
  superName: "", // 上级渠道
  GSteam: "", // 归属团队
  orderID: "", // 订单id
  time: "", // 时间
  release: "" // 回复情况
})
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    if (activeName.value == "one") {
      getComplaint()
    } else if (activeName.value == "two") {
      getComplaint1()
    } else if (activeName.value == "stree") {
      getComplaint2()
    }
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    if (activeName.value == "one") {
      getComplaint()
    } else if (activeName.value == "two") {
      getComplaint1()
    } else if (activeName.value == "stree") {
      getComplaint2()
    }
  }
  paginationData.currentPage = 1
}
// #endregion

//  #region 查找未处理纠纷订单
const getComplaint = () => {
  if (!searchData.time) {
    searchData.time = []
  }
  getComplaintApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName,
    department: userStore.department,
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    packageId: searchData.packageId || "", // 套餐

    type: searchData.type || "", // 纠纷单类型
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    GSteam: searchData.GSteam || "", // 归属团队
    orderID: searchData.orderID || "", // 订单id
    handle: searchData.release || "", // 回复情况

    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: ["0"]
  }).then((res: any) => {
    tableData.value = res.data.list
    paginationData.total = res.data.total
    console.log(res, "获取的未处理")
  })
}
// #endregion

//  #region 查找处理中
const tableTotal1 = ref()
const getComplaint1 = () => {
  if (!searchData.time) {
    searchData.time = []
  }
  getComplaintApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName,
    department: userStore.department,
    // team: searchData.GSteam || "",
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    packageId: searchData.packageId || "", // 套餐

    type: searchData.type || "", // 纠纷单类型
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    GSteam: searchData.GSteam || "", // 归属团队
    orderID: searchData.orderID || "", // 订单id
    handle: searchData.release || "", // 回复情况
    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: ["1"]
  }).then((res: any) => {
    tableData1.value = res.data.list
    tableTotal1.value = res.data.total
    console.log(res.data, "获取的处理中")
  })
}
// #endregion

// #region 查找已完成
const tableTotal2 = ref()
const getComplaint2 = () => {
  if (!searchData.time) {
    searchData.time = []
  }
  getComplaintApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName || "",
    department: userStore.department,
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    packageId: searchData.packageId || "", // 套餐

    type: searchData.type || "", // 纠纷单类型
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    GSteam: searchData.GSteam || "", // 归属团队
    orderID: searchData.orderID || "", // 订单id
    handle: searchData.release || "", // 回复情况
    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: ["2", "3"] // 已完成状态
  }).then((res: any) => {
    // tableData2.value = res.data.list.filter((item: any) => item.state === "2" || item.state === "3")
    tableData2.value = res.data.list
    tableTotal2.value = res.data.total
    // tableData2.value.filter((item: any) => {
    //   console.log(item.state, 1222)
    // })
    console.log(res, "获取的已完成")
  })
}
// #endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getComplaint, { immediate: true })
watch([() => paginationData.currentPage, () => paginationData.pageSize], getComplaint1, { immediate: true })
watch([() => paginationData.currentPage, () => paginationData.pageSize], getComplaint2, { immediate: true })

// #region 表单验证和按钮操作
const ruleForm = reactive<any>({
  // id  订单id
  // time 纠纷时间
  superName: "", // 上级渠道
  type: "", // 纠纷单类型
  reason: "", // 纠纷原因
  team: "", // 所属团队
  orderId: "", // 订单ID
  orderOutId: "", // 订单外部ID
  user: "", // 下单账号（旺旺名）
  contact: "", // 联系人
  mobile: "", // 联系电话
  cause: "", // 纠纷理由
  image: "", // 纠纷单图片
  packageId: "", // 套餐
  state: "0" // 发布订单状态  0是未处理  1是处理中 2是已完成 3是超时完成
})
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  superName: [{ required: true, trigger: "blur", message: "请输入上级渠道" }],
  type: [{ required: true, trigger: "blur", message: "请输入纠纷单类型" }],
  cause: [{ required: true, trigger: "blur", message: "请输入纠纷原因" }],
  reason: [{ required: true, trigger: "blur", message: "请输入纠纷理由" }],
  orderOutId: [{ required: true, trigger: "blur", message: "请输入订单外部ID" }],
  desc: [{ required: true, trigger: "blur", message: "请输入反馈信息" }],
  team: [{ required: true, trigger: "blur", message: "请选择归属团队" }],
  packageId: [{ required: true, trigger: "blur", message: "请选择系统套餐" }],
  orderId: [{ required: true, trigger: "blur", message: "请输入订单ID" }],
  contact: [{ required: true, trigger: "blur", message: "请输入联系人" }],
  mobile: [{ required: true, trigger: "blur", message: "请输入手机号" }]
})
const loadingbutton = ref(false) // 确定按钮loading
const uploadFuc = async () => {
  loadingbutton.value = true
  // 上传图片(多张和单张)
  const fileData = new FormData()
  if (fileList1.value.length != 0) {
    fileList1.value.forEach((file: any) => {
      if (file.status === "success") return
      fileData.append("file", file.raw)
      console.log("file", file)
    })
  }
  if (fileData == null) {
    await ComplaintUpload(fileData).then((res: any) => {
      if (res.code == 200) {
        ruleForm.image = res.data
          .map((item: any) => {
            return item.split("/image/")[1]
          })
          .join()
        console.log(ruleForm.image, "拿到的图片")
        fileList.value = []
      }
    })
  }

  // 添加和修改接口
  if (currentUpdateId.value == undefined) {
    await AddComplaintApi({
      superName: ruleForm.superName, // 上级渠道
      issuer: userStore.usernameID, // 发布订单人名
      type: ruleForm.type, // 纠纷单类型
      reason: ruleForm.reason, // 纠纷原因
      team: ruleForm.team, // 所属团队
      orderID: ruleForm.orderId, // 订单id
      orderOutId: ruleForm.orderOutId, // 订单外部id
      user: ruleForm.user, // 下单账号（旺旺名）
      contact: ruleForm.contact, // 联系人
      mobile: ruleForm.mobile, // 联系电话
      cause: ruleForm.cause, // 纠纷理由
      image: ruleForm.image, // 纠纷单图片
      packageId: ruleForm.packageId, // 系统套餐
      state: "0" // 发布订单状态
    }).then((res) => {
      console.log(res)

      console.log(ruleForm.image, 33333333)
      ElMessage.success("发布成功")
      dialogVisible.value = false
      loadingbutton.value = false
      getComplaint()
      // 存储数据
    })
  } else {
    console.log(ruleForm.image, 33333333)
    console.log(fileList1.value, 44444444)
    updateComplaintApi({
      id: currentUpdateId.value,
      superName: ruleForm.superName,
      type: ruleForm.type, // 纠纷单类型
      reason: ruleForm.reason,
      team: ruleForm.team,
      orderID: ruleForm.orderId,
      orderOutId: ruleForm.orderOutId,
      user: ruleForm.user,
      contact: ruleForm.contact,
      mobile: ruleForm.mobile,
      cause: ruleForm.cause,
      packageId: ruleForm.packageId,
      image: ruleForm.image
    }).then((res: any) => {
      console.log(res, "修改后的状态")
      ElMessage.success("修改成功")
      dialogVisible.value = false
      getComplaint()
      getComplaint1()
    })
  }
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      await uploadFuc()
      formEl.resetFields()
      fileList1.value = []
    }
  })
}

const clearValidate = () => {
  ruleFormRef.value?.clearValidate()
  uploadRef.value?.clearFiles()
}
const resetForm = () => {
  currentUpdateId.value = undefined
  fileList1.value = []
  fileList.value = []
  ruleForm1.video = ""
  ruleFormRef.value?.clearValidate()
  // 清空reactive对象里面的key值
  // Object.keys(ruleForm).map((key) => {
  //   delete ruleForm[key]
  // })
  clearValidate()
}
const addper = () => {
  dialogVisible.value = true
  Object.keys(ruleForm).map((key) => {
    delete ruleForm[key]
  })
  // clearValidate()
  console.log(ruleForm.superName, "上级渠道")
}
// #endregion

// #region  查看详情数据
const ruleFormXQ = reactive<any>({ data: {} })
const messages = ref() // 对话框
const Kimage = ref() // 投诉图片
const Kstate = ref() // 状态
const handleClick = async (res: any) => {
  console.log("拿到当前行数据", res)
  ruleFormXQ.data = res
  ruleFormXQ.data.KID = res.id // 纠纷单号
  ruleFormXQ.data.Ktime = formatDateTime(res.time) // 纠纷时间
  ruleFormXQ.data.Ktype = res.type
  ruleFormXQ.data.Kreason = res.reason
  ruleFormXQ.data.Kcause = res.cause
  ruleFormXQ.data.KorderOutId = res.orderOutId
  ruleFormXQ.data.Kuser = res.user
  ruleFormXQ.data.Kcontact = res.contact
  ruleFormXQ.data.Kmobile = res.mobile
  if (res.image == "") {
    ruleFormXQ.data.Kimage = "111"
  } else {
    ruleFormXQ.data.Kimage =
      res.image.charAt(res.image.length - 1) === "," ? res.image.split(",").slice(0, -1) : res.image.split(",")
  }
  // console.log("图片", ruleFormXQ.data.Kimage)
  Kimage.value = res.image
  Kstate.value = res.state
  dialogVisible1.value = true
  queryMessageApi({
    complaintId: res.id
  }).then((ress: any) => {
    messages.value = ress.data

    // str = str.slice(0, -1)
  })
}
// #endregion

// #region 已完成按钮
const timestamp = ref<any>()
const basetime = ref<any>()
const handleAdd = (row: any) => {
  timestamp.value = Date.now()
  basetime.value = 1 * 24 * 60 * 60 * 1000 // 如果超过一天没有完成那么就是超时完成
  if (timestamp.value - row.time < basetime.value) {
    row.state = "2"
  } else {
    row.state = "3"
  }
  console.log(row.state)
  updateComplaintApi({
    id: row.id,
    state: row.state
  }).then((res: any) => {
    console.log(res, "修改后的状态")
    ElMessage.success("提交成功")
    getComplaint1()
    getComplaint2()
  })
}
// #endregion

// #region 修改
const currentUpdateId = ref<undefined | string>(undefined)
const handleupdate = (row: any) => {
  console.log(row, "修改")
  currentUpdateId.value = row.id
  dialogVisible.value = true
  ruleForm.superName = row.superName // 上级渠道
  ruleForm.type = row.type // 纠纷单类型
  ruleForm.reason = row.reason // 纠纷原因
  ruleForm.team = row.team // 所属团队
  ruleForm.orderId = row.orderID // 订单id
  ruleForm.orderOutId = row.orderOutId // 订单外部id
  ruleForm.user = row.user // 下单账号（旺旺名）
  ruleForm.contact = row.contact // 联系人
  ruleForm.mobile = row.mobile // 联系电话
  ruleForm.cause = row.cause // 纠纷理由
  ruleForm.packageId = row.packageId // 系统套餐
  ruleForm.image = row.image
    ?.split(",")
    .map((item: any) => {
      return item.split("/image/")[1]
    })
    .join()
  if (row.image) {
    fileList1.value = row.image
      .substring(0, row.image.length - 1)
      ?.split(",")
      .map((item: any) => {
        return {
          url: item
        }
      })
  }
}
// #endregion

// #region 提交表单
const ruleForm1 = reactive({
  desc: "",
  image: "",
  video: ""
})
const submitForm1 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      await uploadFuc1()
      await addMessageApi({
        source: ruleFormXQ.data.KID,
        body: ruleForm1.desc,
        image: ruleForm1.image,
        video: ruleForm1.video,
        user: userStore.username,
        handle: "处理未回复",
        release: "发布已回复"
      }).then(() => {
        ruleForm1.desc = ""
        ruleForm1.image = ""
        ElMessage.success("上传成功")
        getComplaint1()
      })
      dialogVisible1.value = false
    } else {
      console.log("error submit!", fields)
    }
  })
}
const uploadFuc1 = async () => {
  const fileData1 = new FormData()
  fileList.value.forEach((file: any) => {
    fileData1.append("file", file.raw)
  })
  if (fileList.value.length !== 0) {
    await ComplaintUpload(fileData1).then((res: any) => {
      if (res.code == 200) {
        ruleForm1.image = res.data
          .map((item: any) => {
            return item.split("/image/")[1]
          })
          .join()
        console.log(ruleForm1.image, "拿到的图片")
        fileList.value = []
      }
    })
  }
}
const resetForm1 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogVisible1.value = false
  fileList.value = []
  formEl.resetFields()
}
const fileList1 = ref<UploadUserFile[]>([]) // 多张图片上传
const fileList = ref<UploadUserFile[]>([]) // 反馈图片
const dialogVisible2 = ref(false)
const dialogImageUrl = ref("")
// 反馈图片
const handleChageImg = (file: any, resfileList: any) => {
  const size = ref(10)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList.value = []
  } else {
    fileList.value = resfileList
  }
}

//  多张图片上传 发布时图片改变
const handleChageImg1 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList1.value = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
  } else {
    // fileList1.value = resfileList
    // console.log(fileList1.value, 192)
    ruleForm.image = resfileList
      .map((item: any) => {
        return item.response?.data.split("/image/")[1]
          ? item.response?.data.split("/image/")[1]
          : item.url.split("/image/")[1]
      })
      .join(",")
  }
}
// 多张图片 移除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles, 180)
  // fileList1.value = uploadFiles
  ruleForm.image = uploadFiles
    .map((item: any) => {
      return item.response?.data.split("/image/")[1]
        ? item.response?.data.split("/image/")[1]
        : item.url.split("/image/")[1]
    })
    .join(",")
}
// 放大查看图片
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible2.value = true
}
// #endregion

const formatterCombo = (row: any, column: any, celValue: any) => {
  comboList.value.filter((item: any) => {
    if (item.id == row.packageId) {
      celValue = item.name
    }
  })
  return celValue
}

// #region 查找团队 团队持久
const TeamListArr = ref()
const teamStore = useTeamStore()
teamStore.getTeamFn()
watch(
  [() => teamStore.teamListStore],
  (newValue) => {
    TeamListArr.value = newValue.flat()
  },
  {
    immediate: true
  }
)
// TeamListArr.value = teamStore.teamListStore

const ChangeClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name, event)
  if (paginationData.currentPage === 1) {
    if (tab.props.name == "one") {
      getComplaint()
    } else if (tab.props.name == "two") {
      getComplaint1()
    } else if (tab.props.name == "stree") {
      getComplaint2()
    }
  }
  paginationData.currentPage = 1
}

// #endregion

// #region 测试图片放大
// const srcList = [
//   "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
//   "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
//   "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
//   "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
//   "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
//   "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
//   "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
// ]
// #endregion

// #region 系统对应套餐
// import { useComboStore } from "@/store/modules/combo"
// const comboStore = useComboStore()
// comboStore.getComoboFn()
const comboList = ref<any>([])
const taocan = () => [
  getComboDataApi10({
    page: 1,
    size: 10000,
    state: "",
    team: ""
  }).then((res: any) => {
    comboList.value = res.data
    console.log(res.data, "taocan")
  })
]
taocan()
// watch(
//   [() => comboStore.comboListStore],
//   (newValue) => {
//     comboList.value = newValue.flat()
//   },
//   {
//     immediate: true
//   }
// )

// #endregion

// #region  首回按钮
const SHbutton = ref(false)
const SHid = ref()
const SHstate = ref()
const SFSH = (row: any) => {
  SHbutton.value = true
  SHid.value = row.id
  SHstate.value = row.state
  // console.log("点击8888", row)
  // 将首回的值改为true，并且只能点击一次
  // 未首回是1  已首回是2 首回超时是3
}
const confirmEvent = () => {
  console.log("confirm!")
  SHbuttonApi({
    id: SHid.value,
    state: SHstate.value,
    isState: "按时首回",
    isFirst: true
  }).then((res: any) => {
    console.log(res, "修改后的状态")
    ElMessage.success("确认成功")
    getComplaint1()
  })
}
const cancelEvent = () => {
  console.log("cancel!")
  SHbuttonApi({
    id: SHid.value,
    state: SHstate.value,
    isState: "首回超时",
    isFirst: true
  }).then((res: any) => {
    console.log(res, "修改后的状态")
    ElMessage.success("确认成功")
    getComplaint1()
  })
}
// #endregion

//时间
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]

/** 订单下载 默认下载所有数据，查询后下载所有符合查询条件的数据*/
const loading = ref(false)
const downLoad = async () => {
  loading.value = true
  await rechargeRecord({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName || "",
    department: userStore.department,
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    packageId: searchData.packageId || "", // 套餐
    type: searchData.type || "", // 纠纷单类型
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    GSteam: searchData.GSteam || "", // 归属团队
    orderID: searchData.orderID || "", // 订单id
    handle: searchData.release || "", // 回复情况
    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: ["2", "3"] // 已完成状态
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "投诉已完结列表.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
    loading.value = false
    // console.log(blob, 88888888)
  })
}
const downLoadtwo = async () => {
  loading.value = true
  await rechargeRecord({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName || "",
    department: userStore.department,
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    packageId: searchData.packageId || "", // 套餐
    type: searchData.type || "", // 纠纷单类型
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    GSteam: searchData.GSteam || "", // 归属团队
    orderID: searchData.orderID || "", // 订单id
    handle: searchData.release || "", // 回复情况
    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: ["1"] // 处理中状态
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "投诉处理中列表.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
    loading.value = false
    // console.log(blob, 88888888)
  })
}
import { getToken } from "@/utils/cache/cookies"
const headersOpts = {
  token: getToken()
}
// #region 删
const handledelete = (row: any) => {
  ElMessageBox.confirm(`您确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteComplaintApi(row.id).then(() => {
      ElMessage.success("删除成功")
      getComplaint()
      getComplaint1()
    })
  })
}
// #endregion

// isRush true 催   false 没催
const handleisRush = (row: any) => {
  updateComplaintApi({
    id: row.id,
    isRush: "已催单"
  }).then((res: any) => {
    console.log(res, "修改后的状态")
    ElMessage.success("已催单啊")
    getComplaint()
    getComplaint1()
  })
}
//  #region  上传mp3、和mp4
const uploadRef = ref<UploadInstance>()
const isUploading = ref<boolean>(false) // 上传时禁止上传
// 上传中禁止上传
const UploadProgress = () => {
  isUploading.value = true
}
// 上传成功
const UploadSuccess = (response: any) => {
  dialogVisible.value = false
  isUploading.value = false
  if (response.code == 200) {
    ElMessage.success("上传成功")
    ruleForm1.video = response.data
    // console.log(ruleForm1.video, "4")
    // console.log(file, "1")
    // console.log(fileList, "2")
    // console.log(response, "3")
  }
  // uploadRef.value!.clearFiles()
  // getComplaint1()
  // dialogVisible1.value = false
  console.log(response, "1")
  // console.log(file, "2")
  // console.log(fileList, "3")
}
// 上传失败
const UploadError = (response: any, file: any, fileList: any) => {
  isUploading.value = false
  ElMessage.error("上传失败")
  uploadRef.value?.clearFiles()
  console.log(response, "2")
  console.log(file, "2")
  console.log(fileList, "2")
}
// #endregion

// #region 播放amr音频文件
import BenzAMRRecoder from "benz-amr-recorder"
// http://192.168.0.154:8080/video/file8668adbdf9cb4c8c85c5dde8bb846ef6.amr
const amrtime = ref(0)
const playAmrData = (row: any) => {
  console.log(row)
  const url = row
  console.log(url)
  const amr = new BenzAMRRecoder()
  amr
    .initWithUrl(url)
    .then(() => {
      // console.log(Math.ceil(amr.getDuration()), "11")
      amrtime.value = Math.ceil(amr.getDuration())
      amr.play()
    })
    .catch(() => {
      ElMessage.error("文件损坏,播放失败")
    })
}
// #endregion
</script>

<template>
  <div class="app-container">
    <el-card class="box-card-center"
      ><el-tabs v-model="activeName" class="demo-tabs" @tab-click="ChangeClick">
        <!-- 1 -->
        <el-tab-pane name="one">
          <template #label>
            <span class="custom-tabs-label">
              <!-- :value="userStore.NOCLsum" -->
              <el-badge class="item">
                <span>未处理</span>
              </el-badge>
            </span>
          </template>
          <div style="display: flex">
            <el-form ref="searchFormRef" :inline="true" :model="searchData">
              <el-form-item prop="time" label="订单日期">
                <el-date-picker
                  v-model="searchData.time"
                  type="datetimerange"
                  range-separator="到"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :shortcuts="shortcuts"
                  :default-time="defaultTime1"
                />
              </el-form-item>
              <!-- <el-form-item prop="id" label="纠纷单号">
                <el-input v-model.trim="searchData.id" placeholder="请输入" />
              </el-form-item> -->
              <el-form-item prop="contact" label="联系人">
                <el-input v-model.trim="searchData.contact" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="mobile" label="联系电话">
                <el-input v-model.trim="searchData.mobile" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="纠纷单类型" prop="type">
                <el-select v-model="searchData.type" placeholder="请选择投诉单类型">
                  <el-option label="工商部投诉" value="工商部投诉" />
                  <el-option label="工信部投诉" value="工信部投诉" />
                  <el-option label="运营商投诉" value="运营商投诉" />
                </el-select>
              </el-form-item>
              <el-form-item prop="reason" label="纠纷原因">
                <el-input v-model.trim="searchData.reason" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="superName" label="上级渠道">
                <el-input v-model.trim="searchData.superName" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="GSteam" label="归属团队">
                <el-select v-model="searchData.GSteam" clearable filterable placeholder="请选择归属团队">
                  <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
              <el-form-item prop="packageId" label="套餐">
                <el-select
                  v-model="searchData.packageId"
                  clearable
                  filterable
                  placeholder="请选套餐"
                  style="width: 240px"
                >
                  <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item prop="orderID" label="订单ID">
                <el-input v-model.trim="searchData.orderID" placeholder="请输入" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
                <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
              </el-form-item>
              <el-button type="primary" @click="addper" class="box-card-top">发布纠纷订单</el-button>
            </el-form>
          </div>

          <el-table :data="tableData" style="width: 100%">
            <!-- <el-table-column prop="id" label="纠纷单号" width="180" /> -->
            <el-table-column prop="orderID" label="订单ID" />
            <el-table-column prop="orderOutId" label="订单外部ID" />
            <el-table-column prop="time" label="申请日期">
              <template #default="scope">
                {{ formatDateTime(scope.row.time) }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="纠纷单类型" />
            <el-table-column prop="reason" label="纠纷原因" />
            <el-table-column prop="team" label="归属团队" />
            <el-table-column prop="packageId" label="系统套餐" :formatter="formatterCombo" />

            <el-table-column prop="user" label="下单账号" />
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="mobile" label="联系电话" />

            <el-table-column label="催单提醒" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleisRush(scope.row)">催单</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <div style="display: flex">
                  <el-button type="primary" size="small" @click="handleupdate(scope.row)">修改</el-button>

                  <el-button type="primary" size="small" @click="handledelete(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="image" label="投诉图片" align="center">
              <template #default="scope">
                <img v-if="scope.row.image" :src="scope.row.image" alt="" width="80" height="80" />
                <img v-else src="@/assets/layout/logo.png" alt="" width="80" height="80" />
              </template>
            </el-table-column> -->
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="paginationData.total"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <!-- 2 -->
        <el-tab-pane name="two">
          <template #label>
            <span class="custom-tabs-label">
              <!-- :value="userStore.Fbsum" -->
              <el-badge class="item">
                <span>处理中</span>
              </el-badge>
            </span>
          </template>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="time" label="订单日期">
              <el-date-picker
                v-model="searchData.time"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <!-- <el-form-item prop="id" label="纠纷单号">
              <el-input v-model.trim="searchData.id" placeholder="请输入" />
            </el-form-item> -->
            <el-form-item prop="contact" label="联系人">
              <el-input v-model.trim="searchData.contact" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="mobile" label="联系电话">
              <el-input v-model.trim="searchData.mobile" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="纠纷单类型" prop="type">
              <el-select v-model="searchData.type" placeholder="请选择投诉单类型">
                <el-option label="工商部投诉" value="工商部投诉" />
                <el-option label="工信部投诉" value="工信部投诉" />
                <el-option label="运营商投诉" value="运营商投诉" />
              </el-select>
            </el-form-item>
            <el-form-item prop="reason" label="纠纷原因">
              <el-input v-model.trim="searchData.reason" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="superName" label="上级渠道">
              <el-input v-model.trim="searchData.superName" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="GSteam" label="归属团队">
              <el-select v-model="searchData.GSteam" clearable filterable placeholder="请选择归属团队">
                <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="packageId" label="套餐">
              <el-select
                v-model="searchData.packageId"
                clearable
                filterable
                placeholder="请选套餐"
                style="width: 240px"
              >
                <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item prop="orderID" label="订单ID">
              <el-input v-model.trim="searchData.orderID" placeholder="请输入" />
            </el-form-item>
            <!-- <el-form-item prop="release" label="回复情况">
              <el-input v-model="searchData.release" placeholder="请输入" />
            </el-form-item> -->
            <el-form-item label="回复情况" prop="release">
              <el-select v-model="searchData.release" placeholder="请选择回复情况">
                <el-option label="未回复" value="未回复" />
                <el-option label="已回复" value="已回复" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
            <el-tooltip content="下载">
              <el-button style="margin-bottom: 15px" type="primary" :icon="Download" circle @click="downLoadtwo" />
            </el-tooltip>
          </el-form>
          <el-table :data="tableData1" style="width: 100%">
            <!-- <el-table-column prop="id" label="纠纷单号" width="180" /> -->
            <el-table-column prop="orderID" label="订单ID" />
            <el-table-column prop="orderOutId" label="订单外部ID" />
            <el-table-column prop="time" label="申请日期">
              <template #default="scope">
                {{ formatDateTime(scope.row.time) }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="纠纷单类型" />
            <el-table-column prop="reason" label="纠纷原因" />
            <el-table-column prop="team" label="归属团队" />
            <el-table-column prop="packageId" label="系统套餐" :formatter="formatterCombo" />

            <el-table-column prop="user" label="下单账号" />
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="mobile" label="联系电话" />
            <el-table-column label="回复情况" align="center">
              <template #default="scope">
                <el-text class="mx-1" type="success" v-if="scope.row.handle == '处理已回复'">已回复</el-text>
                <el-text class="mx-1" type="danger" v-else>未回复</el-text>
              </template>
            </el-table-column>
            <el-table-column label="是否首回" align="center">
              <template #default="scope">
                <el-popconfirm
                  width="220"
                  confirm-button-text="按时首回"
                  cancel-button-text="首回超时"
                  @confirm="confirmEvent"
                  @cancel="cancelEvent"
                  icon-color="#626AEF"
                  title="是否首回超时"
                >
                  <template #reference>
                    <el-button type="primary" size="small" @click="SFSH(scope.row)" v-if="scope.row.isFirst == 'false'">
                      未首回
                    </el-button>
                  </template>
                </el-popconfirm>

                <el-button type="danger" size="small" disabled v-if="scope.row.isFirst !== 'false'">已首回</el-button>
              </template>
            </el-table-column>
            <el-table-column label="首回情况" align="center">
              <template #default="scope">
                <el-text class="mx-1" type="success" v-if="scope.row.isState == '按时首回'">{{
                  scope.row.isState
                }}</el-text>
                <el-text class="mx-1" type="danger" v-else>{{ scope.row.isState }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="催单提醒" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleisRush(scope.row)">催单</el-button>
              </template>
            </el-table-column>
            <el-table-column label="详情" align="center" width="110">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleClick(scope.row)">查看进度详情</el-button>
              </template>
            </el-table-column>
            <el-table-column label="是否完成" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleAdd(scope.row)">已完成</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <div style="display: flex">
                  <el-button type="primary" size="small" @click="handleupdate(scope.row)">修改</el-button>
                  <el-button type="primary" size="small" @click="handledelete(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal1"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <!-- 3 -->
        <el-tab-pane label="已完结" name="stree" v-loading="loading">
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="time" label="订单日期">
              <el-date-picker
                v-model="searchData.time"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <!-- <el-form-item prop="id" label="纠纷单号">
              <el-input v-model.trim="searchData.id" placeholder="请输入" />
            </el-form-item> -->
            <el-form-item prop="contact" label="联系人">
              <el-input v-model.trim="searchData.contact" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="mobile" label="联系电话">
              <el-input v-model.trim="searchData.mobile" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="纠纷单类型" prop="type">
              <el-select v-model="searchData.type" placeholder="请选择投诉单类型">
                <el-option label="工商部投诉" value="工商部投诉" />
                <el-option label="工信部投诉" value="工信部投诉" />
                <el-option label="运营商投诉" value="运营商投诉" />
              </el-select>
            </el-form-item>
            <el-form-item prop="reason" label="纠纷原因">
              <el-input v-model.trim="searchData.reason" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="superName" label="上级渠道">
              <el-input v-model.trim="searchData.superName" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="GSteam" label="归属团队">
              <el-select v-model="searchData.GSteam" clearable filterable placeholder="请选择归属团队">
                <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="packageId" label="套餐">
              <el-select
                v-model.trim="searchData.packageId"
                clearable
                filterable
                placeholder="请选套餐"
                style="width: 240px"
              >
                <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item prop="orderID" label="订单ID">
              <el-input v-model.trim="searchData.orderID" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>

            <el-tooltip content="下载">
              <el-button style="margin-bottom: 15px" type="primary" :icon="Download" circle @click="downLoad" />
            </el-tooltip>
          </el-form>

          <el-table :data="tableData2" style="width: 100%">
            <!-- <el-table-column prop="id" label="纠纷单号" width="180" /> -->
            <el-table-column prop="orderID" label="订单ID" />
            <el-table-column prop="orderOutId" label="订单外部ID" />
            <el-table-column prop="time" label="申请日期">
              <template #default="scope">
                {{ formatDateTime(scope.row.time) }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="纠纷单类型" />
            <el-table-column prop="reason" label="纠纷原因" />
            <el-table-column prop="team" label="归属团队" />
            <el-table-column prop="packageId" label="系统套餐" :formatter="formatterCombo" width="220" />

            <el-table-column prop="user" label="下单账号" />
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="mobile" label="联系电话" />
            <el-table-column label="首回情况" align="center">
              <template #default="scope">
                <el-text class="mx-1" type="success" v-if="scope.row.isState == '按时首回'">{{
                  scope.row.isState
                }}</el-text>
                <el-text class="mx-1" type="danger" v-else>{{ scope.row.isState }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="详情" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleClick(scope.row)">查看进度详情</el-button>
              </template>
            </el-table-column>
            <el-table-column label="完成状态" align="center">
              <template #default="scope">
                <div v-if="scope.row.state == '2'">完成</div>
                <div v-if="scope.row.state == '3'" class="active">超时完成</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal2"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            /></div
        ></el-tab-pane> </el-tabs
    ></el-card>
    <!-- 弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      :model="ruleForm"
      :title="currentUpdateId === undefined ? '添加投诉订单' : '修改投诉订单'"
      width="30%"
      @close="resetForm"
    >
      <el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" label-width="120px">
        <el-form-item label="上级渠道" prop="superName">
          <el-input v-model.trim="ruleForm.superName" />
        </el-form-item>
        <el-form-item label="纠纷单类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择投诉单类型">
            <el-option label="工商部投诉" value="工商部投诉" />
            <el-option label="工信部投诉" value="工信部投诉" />
            <el-option label="运营商投诉" value="运营商投诉" />
          </el-select>
        </el-form-item>
        <el-form-item label="纠纷原因" prop="reason">
          <el-select v-model="ruleForm.reason" placeholder="请选择纠纷原因">
            <el-option label="1.不知情问题" value="1.不知情问题" />
            <el-option label="2.返费问题" value="2.返费问题" />
            <el-option label="3.套餐内容不符" value="3.套餐内容不符" />
            <el-option label="4.投诉9" value="4.投诉9" />
            <el-option label="5.投诉免费" value="5.投诉免费" />
            <el-option label="6.投诉长期" value="6.投诉长期" />
            <el-option label="7.续约问题" value="7.续约问题" />
            <el-option label="8.异常问题" value="8.异常问题" />
            <el-option label="9.注销问题" value="9.注销问题" />
            <el-option label="10.资费问题" value="10.资费问题" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单ID" prop="orderId">
          <el-input v-model.trim="ruleForm.orderId" />
        </el-form-item>
        <el-form-item label="订单外部ID" prop="orderOutId">
          <el-input v-model.trim="ruleForm.orderOutId" />
        </el-form-item>
        <el-form-item prop="team" label="归属团队">
          <el-select v-model="ruleForm.team" clearable filterable placeholder="请选择归属团队">
            <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="packageId" label="系统对应套餐">
          <el-select v-model="ruleForm.packageId" clearable filterable placeholder="请选套餐" style="width: 240px">
            <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单账号" prop="user">
          <el-input v-model.trim="ruleForm.user" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model.trim="ruleForm.contact" />
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model.trim="ruleForm.mobile" />
        </el-form-item>
        <el-form-item label="纠纷理由" prop="cause">
          <el-input v-model="ruleForm.cause" type="textarea" />
        </el-form-item>
        <!-- 多张图片上传 -->
        <el-form-item prop="image" label="上传图片">
          <el-upload
            :multiple="true"
            v-model:file-list="fileList1"
            action="api/order/package/upload"
            list-type="picture-card"
            :on-remove="handleRemove"
            :headers="headersOpts"
            accept="image/*"
            :on-change="handleChageImg1"
            :on-preview="handlePictureCardPreview"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible2">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>

        <!-- 表单提交按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="loadingbutton" @click="submitForm(ruleFormRef)"> 确定 </el-button>
          <!-- <el-button @click="resetForm(ruleFormRef)">取消</el-button> -->
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog v-model="dialogVisible1" width="70%" @closed="resetForm">
      <div class="box">
        <div class="boxOne">
          <div class="boxtitle">纠纷单信息标题</div>
          <el-scrollbar height="360px">
            <div class="boxOneTest">
              <el-form :model="ruleFormXQ" label-position="left">
                <el-form-item label="发布管理员：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.issuer }}</el-text>
                </el-form-item>
                <el-form-item label="上级信息：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.superName }}</el-text>
                </el-form-item>
                <el-form-item label="归属团队：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.team }}</el-text>
                </el-form-item>
                <!-- 系统套餐 -->
                <el-form-item label="系统套餐：" style="margin-bottom: -10px">
                  <template v-for="item in comboList" :key="item.id">
                    <el-text type="primary" size="small" v-if="item.id == ruleFormXQ.data.packageId">
                      {{ item.name }}</el-text
                    >
                  </template>
                </el-form-item>
                <el-form-item label="纠纷单号：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.KID }}</el-text>
                </el-form-item>
                <el-form-item label="申请日期：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Ktime }}</el-text>
                </el-form-item>
                <el-form-item label="纠纷单类型：" style="margin-bottom: -10px">
                  <el-text class="mx-1" type="warning">{{ ruleFormXQ.data.Ktype }}</el-text>
                </el-form-item>
                <el-form-item label="纠纷原因：" style="margin-bottom: -10px">
                  <el-text class="mx-1" type="warning">{{ ruleFormXQ.data.Kreason }}</el-text>
                </el-form-item>
                <el-form-item label="纠纷理由：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kcause }}</el-text>
                </el-form-item>
                <el-form-item label="订单外部ID：" style="margin-bottom: -10px">
                  <el-text class="mx-1" type="primary">{{ ruleFormXQ.data.KorderOutId }}</el-text>
                </el-form-item>
                <el-form-item label="下单账号：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kuser }}</el-text>
                </el-form-item>
                <el-form-item label="联系人：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kcontact }}</el-text>
                </el-form-item>
                <el-form-item label="联系电话：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kmobile }}</el-text>
                </el-form-item>
                <el-form-item prop="image" label="纠纷单图片" v-if="ruleFormXQ.data.Kimage !== '111'">
                  <!--       v-for="(item, index) in ruleFormXQ.data.Kimage.split(',')" -->
                  <!--     v-for="(item, index) in formWorkOrder.data.kimage.slice(0, -1).split(',')" -->
                  <!--       v-for="(item, index) in srcList" -->
                  <!-- {{ ruleFormXQ.data.Kimage }} -->
                  <el-image
                    class="JFimage"
                    v-for="(item, index) in ruleFormXQ.data.Kimage"
                    :preview-src-list="[item]"
                    :key="index"
                    :src="item"
                    :zoom-rate="1.2"
                    fit="cover"
                  />
                </el-form-item>
              </el-form>
              <!-- <div style="display: flex">
                投诉图片：
                <div>
                  <img v-if="Kimage" :src="Kimage" alt="" width="80" height="80" />
                  <img v-else src="@/assets/layout/logo.png" alt="" width="80" height="80" />
                </div>
              </div> -->
            </div>
          </el-scrollbar>
        </div>
        <div class="boxTow">
          <el-scrollbar height="400px">
            <div
              :class="message.user == userStore.username ? 'chat-message-me' : 'chat-message-other'"
              :style="{ 'padding-bottom': messages.length - 1 === index ? '2rem' : 'none' }"
              v-for="(message, index) in messages"
              :key="index"
            >
              <!--          消息-->
              <div
                :class="message.user == userStore.username ? 'message-me-asWhole-right' : 'message-other-asWhole-right'"
              >
                <!--            消息上面-->
                <div
                  :class="message.user == userStore.username ? 'message-me-asWhole-top' : 'message-other-asWhole-top'"
                >
                  <span style="margin-right: 10px">{{ formatDateTime(message.time) }}</span>
                  <span>{{ message.user }}</span>
                </div>
                <!--          消息内容-->
                <div :class="message.user == userStore.username ? 'message-me' : 'message-other'">
                  <div>{{ message.body }}</div>
                  <template v-if="message.image.split('/image/')[1] && message.image.split('/image/')[1] !== ','">
                    <el-image
                      v-for="(item, index) in message.image.slice(0, -1).split(',')"
                      :preview-src-list="message.imageList"
                      :key="index"
                      style="width: 100px; height: 100px"
                      :src="item"
                      :zoom-rate="1.2"
                      fit="cover"
                    />
                  </template>
                  <video v-if="message.video !== null" controls width="250">
                    <source :src="message.video" type="video/mp4" />
                    <source :src="message.video" type="video/webm" />
                    浏览器不支持视频播放。
                  </video>

                  <audio v-if="message.audio !== null" :src="message.audio" controls loop muted>
                    浏览器不支持音频播放。
                  </audio>
                  <div style="display: flex; align-items: center">
                    <el-button v-if="message.amr !== null" @click="playAmrData(message.amr)">播放amr录音数据</el-button>
                    <div v-if="amrtime !== 0" style="margin-left: 10px">录音时长{{ amrtime }}秒</div>
                  </div>
                  <!-- 测试 -->
                  <!-- <audio
                    v-if="message.audio !== null"
                    src="http://192.168.0.154:8080/video/filed945295802ac475ca68f407b3e7a3520.m4a"
                    controls
                    loop
                    muted
                  >
                    浏览器不支持音频播放。
                  </audio> -->
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="boxDivForm" v-if="Kstate == '1'">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm1"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
        >
          <!-- accept="video/mp4, audio/mp3,video/*" -->
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            drag
            :limit="1"
            action="api/complaint/uploadVideo"
            multiple
            :disabled="isUploading"
            :on-progress="UploadProgress"
            :on-success="UploadSuccess"
            :on-error="UploadError"
            :headers="headersOpts"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">仅允许导入音频、视频</div>
            </template>
          </el-upload>
          <el-form-item label="反馈信息框" prop="desc">
            <el-input v-model="ruleForm1.desc" type="textarea" />
          </el-form-item>
          <!-- 反馈图片 -->
          <el-form-item prop="image" label="反馈图片">
            <el-upload
              :multiple="true"
              :auto-upload="false"
              :file-list="fileList"
              :show-file-list="true"
              list-type="picture-card"
              accept="image/*"
              :on-change="handleChageImg"
              :on-preview="handlePictureCardPreview"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible2">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm1(ruleFormRef)"> 提交 </el-button>
            <el-button @click="resetForm1(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 判断首回情况 -->
    <!-- <el-dialog v-model="dialogSFSH">
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 按时首回 </el-button>
      <el-button @click="dialogVisible = false">首回超时</el-button>
    </el-dialog> -->
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.active {
  color: red;
}

// 查看详情的样式
.box {
  display: flex;
  height: 400px;
  justify-content: space-between;
}
.boxOne {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  line-height: 25px;
}
// 对话框样式
.boxTow {
  margin-left: 20px;
  height: 400px;
  flex: 1;
  border: 1px solid #ccc;
}
.chat-message-other {
  /*background-color: red;*/
  display: flex;
  padding: 1rem 1rem 0 1rem;
}

.chat-message-me {
  /*background-color: red;*/
  display: flex;
  padding: 1rem 1rem 0 1rem;
  flex-direction: row-reverse; /* 将子div的顺序反转 */
}

.message-me-asWhole-headPortrait {
  padding: 3px;
}

.message-other-asWhole-headPortrait {
  padding: 3px;
}

.message-me-asWhole-right {
  display: flex;
  flex-direction: column; /* 设置子元素垂直排列 */
  margin-left: 0.1rem;
}

.message-other-asWhole-right {
  display: flex;
  flex-direction: column; /* 设置子元素垂直排列 */
  margin-left: 0.1rem;
}

.message-me-asWhole-top {
  padding: 3px;
  /* font-size: 12px; */
  font-family: 微软雅黑;
  padding: 3px;
  color: rgba(134, 144, 156, 1);
  text-align: right;
}

.message-other-asWhole-top {
  padding: 3px;
  /* font-size: 12px; */
  font-family: 微软雅黑;
  padding: 3px;
  color: rgba(134, 144, 156, 1);
}

.message-me {
  background-color: rgba(242, 243, 245, 1);
  word-wrap: break-word; /* 处理英文单词换行 */
  word-break: break-all; /* 处理中文换行 */
  display: inline-block; /*将div元素转换为行内块元素*/
  width: auto; /* 宽度根据文本宽度自动调正*/
  padding: 6px 12px;
  border-radius: 4px;
}

.message-other {
  background-color: rgba(242, 243, 245, 1);
  word-wrap: break-word; /* 处理英文单词换行 */
  word-break: break-all; /* 处理中文换行 */
  display: inline-block; /*将div元素转换为行内块元素*/
  width: auto; /* 宽度根据文本宽度自动调正*/
  padding: 6px 12px;
  border-radius: 4px;
}

.examineeFace_logo_style {
  width: 30px;
}

.boxOneTest {
  padding: 0 20px 0 20px;
  .JFimage {
    margin: 10px 10px 0 0;
    height: 100px;
    width: 100px;
  }
}
.boxtitle {
  background-color: #ccc;
  height: 30px;
  padding-left: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #000;
}
.boxDivForm {
  margin-top: 20px;
}
// 查看详情样式结束
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
// 小红点
::v-deep(.el-badge__content.is-fixed) {
  top: -4px;
  right: 6px;
}
</style>
